<template>
  <div class="app-container" >

    <div class="left-content" style="background-color: #d3dce6">
      <h3 style="text-align: center">个人基本信息</h3>
      <br/><br/><br/><br/><br/><br/>
      <el-col :span="24" style="text-align: center">
        <div class="demo-basic--circle">
          <div class="block">
            <el-avatar :size="100" :src="list.headImage"></el-avatar>
          </div>
        </div>
        <h3>{{this.list.userName}}</h3>
        <h4 >{{this.list.email}}</h4>
        <br/><br/><br/><br/>
      </el-col>

      <el-col :span="12" style="text-align: right">
        <el-upload
          class="avatar-uploader"
          action="http://47.110.93.58:8081/user/person/uploadHeadImage"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <el-button>修改头像</el-button>
        </el-upload>
      </el-col>
      <el-col :span="12" style="text-align: left">
        &nbsp;&nbsp;&nbsp;<el-button @click="handleEditIntroduce">个人介绍</el-button>
        <br/><br/><br/><br/><br/>
      </el-col>


    </div>
    <div class="right-content" >
      <h4 style="text-align: left;color: #97a8be">平台个人信息</h4>
      <divider></divider>
      <el-form  ref="dataForm" :rules="rules" :model="list" :inline="true" status-icon size="mini" >
        <el-form-item label="昵称" prop="username">
          <el-col :span="24"> <el-input v-model="list.userName" :disabled="true"></el-input></el-col>
        </el-form-item>
        <br/>
        <el-form-item label="密码" prop="password" >
          <el-col :span="24">
            <el-input v-model="list.password" :disabled="true" ></el-input>
          </el-col>
        </el-form-item>
        <el-button @click="handleEditSystemMessage" style="text-align: right" size="mini">修改</el-button>
      </el-form>

      <h4 style="text-align: left;color: #97a8be">基本信息</h4>
      <divider></divider>
      <el-form  ref="dataForm" :rules="rules" :model="list" :inline="true" status-icon size="mini" >
        <el-form-item label="真名" prop="name" >
          <el-col :span="24">
            <el-input v-model="list.name" :disabled="baseShow" ></el-input>
          </el-col>
        </el-form-item>
        <br/>
        <el-form-item label="性别" prop="sex" >
          <el-col :span="24">
            <el-radio v-model="list.sex" label="1" :disabled="baseShow">男</el-radio>
            <el-radio v-model="list.sex" label="2" :disabled="baseShow">女</el-radio>
          </el-col>
        </el-form-item>
        <br/>
        <el-form-item label="居住地" prop="address">
          <el-col :span="30">
            <el-input v-model="list.address" :disabled="baseShow"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="出生日期" prop="birth" >
          <el-col :span="24">
            <el-date-picker
              v-model="list.birthday"
              type="date"
              placeholder="选择日期"
              :disabled="baseShow"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="职业" prop="profession" >
          <el-col :span="24">
            <el-input v-model="list.profession" :disabled="baseShow"></el-input>
          </el-col>
        </el-form-item>
        <br/>
        <el-form-item label="E-mail" prop="email" >
          <el-col :span="24">
            <el-input v-model="list.email" :disabled="baseShow"></el-input>
          </el-col>
        </el-form-item>
        <el-button style="text-align: right" size="mini" @click="baseMessageCommit">{{baseMessage}}</el-button>
      </el-form>
    </div>

    <SystemMessageDialog ref="systemMessageDialog" @ok="handleOk"></SystemMessageDialog>
  </div>
</template>

<script>
import moment from 'moment'
import SystemMessageDialog from "@/components/personal/systemMessageDialog";
import {queryPersonDetail, updateBasePersonDetail, updateHeadImage} from "@/api/person";
import {sendMatomo} from "@/api/matomo";
export default {
  name: "personalInformation",
  components: {SystemMessageDialog},
  data() {
    return {
      baseShow: true,
      baseMessage: '修改',
      form: {},
      rules: {},
      list: {},
    }
  },
  created() {
    this.getPersonDetail()
  },
  methods: {
    getPersonDetail() {
      queryPersonDetail().then(res => {
        this.list = res.body.data
        this.list.password = '*******'
        return this.list
      })
    },
    handleEditSystemMessage() {
      this.$matomo.trackEvent('个人信息', '查看', '平台个人信息')
      this.$refs.systemMessageDialog.add(this.list.userName);
    },
    handleEditIntroduce() {
      this.$matomo.trackEvent('个人信息', '查看', '个人介绍')
      this.$refs.systemMessageDialog.edit(this.list.introduction);
    },
    baseMessageCommit() {
      sendMatomo(14,'个人信息', '修改', '修改个人信息')
      this.baseShow = !this.baseShow
      if (this.baseMessage == '修改')
        this.baseMessage = '保存'
      else {
        this.baseMessage = '修改'
        this.list.birthday = moment(this.list.birthday).format('YYYY-MM-DD HH:mm:ss')
        updateBasePersonDetail(this.list).then( res => {
          if (res.body.data)
            this.$message.success("修改成功")
          else
            this.$message.error("修改失败")
          this.$matomo.trackEvent('个人信息', '修改', '基本信息')
        })
      }
    },
    async handleAvatarSuccess(res, file) {
      await updateHeadImage(res.body.data)
      this.getPersonDetail()
    },
    beforeAvatarUpload(file) {
      this.$matomo.trackEvent('个人信息', '文件上传', '修改头像')
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
    handleOk() {
      this.getPersonDetail()
    }
  }
}
</script>

<style scoped>
.app-container{
  height: 100%;
}
/*left*/
.left-content{
  height: 100%;
  width: 450px;
  float: left;
}
.left-content .left-content-title{
  width: 300px;
  display: block;
}
.left-content .left-content-text{
  width: 550px;
  position: relative;
  padding-top: 20px;
}
.left-content .left-content-text .button{
  position: absolute;
  top: 470px;
  left: 470px;
}
.left-content .left-content-text .x-button{
  position: absolute;
  top: 470px;
  left: 370px;
}
/*right*/
.right-content{
  width: 500px;
  float: left;
  height: 100%;
  padding-left: 50px;
}
</style>
